<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	.pq-grid div.pq-tabs
	{
	    width:650px;    
	}    
	.pq-grid div.pq-tabs *
	{
	    white-space:normal;    
	}
	.pq-grid p
	{
	    margin:10px;
	}
	.pq-grid .pq-tabs b
	{
	    font-weight:bold;
	}
	</style>

<script>
    $(function () {
        function onTabsActive(evt, ui){
            //grid requires refresh whenever corresponding tab is refreshed.
            ui.newPanel.find(".pq-grid").pqGrid("refresh");
        };
        /**
        * does data binding of detail view.
        * @return: {jQuery object}
        */
        function initDetail( ui ) {
            var rowData = ui.rowData,                
                //get a copy of gridDetailModel
                detailobj = gridDetailModel( rowData ),
                //get markup of the detail template.                
                html = $("#tmpl").html(),
                //create new detail place holder
                $detail = $("<div></div>");


            for (var key in rowData) {
                var cellData = (rowData[key] == null) ? "" : rowData[key];
                html = html.replace("<#=" + key + "#>", cellData);
            }
            $detail.html(html);

            $detail.find(".pq-tabs").tabs().on("tabsactivate", onTabsActive);

            //append pqGrid in the 2nd tab.                
            $("<div></div>").appendTo($("#tabs-2", $detail)).pqGrid( detailobj );

            return $detail;
        };

        var $gridMain = $("div#grid_md").pqGrid({
            width: 800, height: 550,
            dataModel: {
                location: "remote",
                sorting: "local",
                dataType: "JSON",
                method: "GET",
                url: "/pro/orders/get",
                //url: "/pro/orders.php",//for PHP
                getData: function (dataJSON) {
                    var data = dataJSON.data;
                    //expand the first row
                    data[0]['pq_detail'] = { 'show': true };
                    return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
                }
            },
            colModel: [
                { title: "", minWidth: 27, width: 27, type: "detail", resizable: false, editable: false /* no need to mention dataIndx */ },
                { title: "ShipCountry", width: 100, dataIndx: "ShipCountry" },
                { title: "Customer Name", width: 120, dataIndx: "ContactName" },
                { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer", editable: false },
		        { title: "Shipping Via", width: 100, dataIndx: "ShipVia" },
                { title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight" },
                { title: "Shipping Name", width: 160, dataIndx: "ShipName" }
            ],
            pageModel: { type: "local", rPP: 50, rPPOptions: [10, 15, 50], strDisplay: "{0} to {1} of {2}" },
            title: "<b>Shipping Orders</b>",
            resizable: true,
            wrap: false,
            hwrap: false,            
            virtualX: true, virtualY: true,
            editable: false,
            selectionModel: { type: 'cell' },
            detailModel: { init: initDetail }
        });

        /* another grid in detail view.
        * returns a new copy of detailModel every time the function is called.*/
        var gridDetailModel = function( rowData ){
            
            return {
                pageModel: { type: "local", rPP: 5, strRpp: "" },
                dataModel: {
                    location: "remote",
                    sorting: "local",
                    sortIndx: "ProductName",
                    dataType: "jsonp",
                    method: "GET",                    
                    url: "/pro/orderdetails/get?orderId=" + rowData.OrderID
                },
                colModel: [
                    { title: "Order ID", width: 70, dataIndx: "OrderID" },
                    { title: "Product ID", width: 90, dataType: "integer", dataIndx: "ProductID" },
                    { title: "Product Name", width: 230, dataIndx: "ProductName" },
		            { title: "Unit Price", width: "150", align: "right", dataIndx: "UnitPrice", dataType: "float",
		                summary: {
		                    type: ["sum"],
		                    title: ["<b style='font-weight:bold;'>Total Price:</b> ${0}"]
		                }
		            },
		            { title: "Quantity", align: "right", width: 105, dataIndx: "Quantity", dataType: "integer",
		                summary: {
		                    type: ["sum"],
		                    title: ["<b style='font-weight:bold;'>Total Qty:</b> {0}"]
		                }
		            },
		            { title: "Discount", width: 80, align: "right", dataIndx: "Discount", dataType: "float" }
		        ],
                editable: false,
                groupModel: {
                    dataIndx: ["OrderID"],
                    dir: ["up"],
                    title: ["{0} - {1} product(s)"],
                    icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
                },
                flexHeight: true,
                width: "100%",
                numberCell: { show: false },
                showTop: false,
                showBottom: false
            };
        }
    });
        
</script>    
</head>
<body>

<div id="grid_md" style="margin:5px auto;"></div>

<!--script tag used to define detail template-->
<script type="text/pq-template" id="tmpl">
    <div class="pq-tabs" style="width:700px;">
        <ul>
            <li><a href="#tabs-1">Address</a></li>
            <li><a href="#tabs-2">Products</a></li>            
            <li><a href="#tabs-3">Dates</a></li>
        </ul>
        <div id="tabs-1">
            <p><b>Shipping Address:</b> <#=ShipAddress#></p>
            <p><b>Shipping City:</b> <#=ShipCity#></p>
            <p><b>Shipping Region:</b> <#=ShipRegion#></p>
            <p><b>Shipping Postal Code:</b> <#=ShipPostalCode#></p>
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
            <p><b>Order Date:</b> <#=OrderDate#></p>
            <p><b>Required Date:</b> <#=RequiredDate#></p>
            <p><b>Shipped Date:</b> <#=ShippedDate#></p>
        </div>
    </div>
</script>

</body>

</html>
